<template>
  <div class="borderBox" id="printContent" ref="contentBox">
    <div class="selectLine">
      <!-- <el-select
        size="mini"
        style="width: 153px"
        v-model="cargoCode"
        placeholder="货种"
        @change="cargoChange"
      >
        <el-option
          v-for="(item, index) in cargoList"
          :key="index"
          :value="item.cargoCode"
          :label="item.cargoName"
        ></el-option>
      </el-select> -->
      <div>
      <el-button size="mini" @click="toPdf">下载</el-button>
      <el-button size="mini" @click="printDivContent" class="printBtn">打印</el-button>
    </div>
    </div>
    <!-- 码头名称 -->
    <div class="head">
      {{ (cargoList.boxCompany ? cargoList.boxCompany : '') + (cargoList.berthName ? cargoList.berthName : '') }}
    </div>
    <!-- 办理业务类型 -->
    <div class="type">
      {{ "" }}
    </div>
    <!-- 时间 委托号 -->
    <div class="timeAndNo">
      {{
        cargoList.QGTime +
        " " +
        "委托号" +
        cargoList.planNo
      }}
    </div>
    <!-- 信息表单 -->
    <div class="form">
      <div class="twoDiv">
        <el-form label-width="110px">
          <el-form-item class="labelAA" label="委托号">
            <span class="contentAA">{{ cargoList.planNo || '' }}</span>
          </el-form-item>
          <el-form-item class="labelAA" label="船名航次">
            <span class="contentAA">{{ cargoList.shipName || '' }}</span>
          </el-form-item>
          <el-form-item class="labelAA" label="提单号">
            <span class="contentAA">{{ cargoList.billNo || '' }}</span>
          </el-form-item>
          <el-form-item class="labelAA" label="箱号">
            <span class="contentAA">{{ cargoList.boxNo || '' }}</span>
          </el-form-item>
          <el-form-item class="labelAA" label="受理日期">
            <span class="contentAA">{{ cargoList.reviewTime || '' }}</span>
          </el-form-item>
          <el-form-item class="labelAA" label="车队">
            <span class="contentAA">{{ cargoList.carCode || '' }}</span>
          </el-form-item>
        </el-form>
      </div>
      <div class="twoDiv">
        <el-form label-width="110px">
          <el-form-item class="labelAA" label="作业方式">
            <span class="contentAA">{{ cargoList.workType || '' }}</span>
          </el-form-item>
          <el-form-item class="labelAA" label="内外贸">
            <span class="contentAA">{{ cargoList.tradeName || '' }}</span>
          </el-form-item>
          <el-form-item class="labelAA" label="尺寸/类型">
            <span class="contentAA">{{ cargoList.boxTypeSize || '' }}</span>
          </el-form-item>
          <el-form-item class="labelAA" label="箱公司">
            <span class="contentAA">{{ cargoList.boxCompany || '' }}</span>
          </el-form-item>
          <el-form-item class="labelAA" label="有效日期">
            <span class="contentAA">{{ /* cargoList.reviewTime || '' */ }}</span>
          </el-form-item>
          <el-form-item class="labelAA" label="计划场位">
            <span class="contentAA">{{ /* cargoList.carCode || '' */ }}</span>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 二维码 -->
    <div class="barCode">
      <img :src="cargoList.QGCode" alt="" width="80%" />
    </div>
  </div>
</template>

<script>
import html2canvas from "html2canvas";
import jspdf from "jspdf";
export default {
  name: "",
  components: {},
  props: ["cargoList", "cargoCodecargoCode"],
  data() {
    return {
      cargoList: [],
      cargoCode: "",
    };
  },
  methods: {
    async toPdf() {
      const ref = this.$refs.contentBox
      html2canvas(ref,{
        useCORS: true,
      }).then((canvas)=>{
        const dataURL = canvas.toDataURL('image/png',1.0)
        var pdf = new jspdf('','pt','a4')
        var contentWidth = canvas.width
        var leftHeight = ref.scrollHeight
        var pageHeight = contentWidth / 592.28 * 841.89
        var position = 0
        while(leftHeight > 0){
          pdf.addImage(dataURL,'JPEG',0,position,595.28,841.89)
          leftHeight -= pageHeight
          position -= 841.89
        }
        pdf.save('凭证')
      })
      // var pdf = new jspdf("x", "pt", [595, 750])
      // pdf.setFont("default_vfs"); // 使用字体
      // const source = document.getElementById("printContent")
      // var options = {
      //   pagesplit: false, //设置是否自动分页
      //   background: "#FFFFFF", //如果导出的pdf为黑色背景，需要将导出的html模块内容背景 设置成白色。
      // };
      // await pdf.html(source, {
      //   callback: function (pdf1) {
      //     pdf1.save("test.pdf");
      //   },
      //   margin: [30, 0, 30, 0],
      // });
      // // pdf.save("test.pdf")

    },
    cargoChange(val) {
      // this.getQcode(val)
      this.$emit("getQcode", val, true);
    },
    printDivContent() {
      var divElementContents =
        document.getElementById("printContent").innerHTML;
      var windows = window.open();
      windows.document.write(divElementContents);
      windows.document.write(`<style lang="less" scoped>
        .borderBox {
          text-align: center;
        }
        .labelAA{
          margin-top:10px;
        }
        .contentAA{
          margin-top:-20px;
          display:inline-block;
        }
        .selectLine {
          width: 100%;
          display: flex;
          justify-content: space-between;
          display:none;
        }
        .printBtn{
          margin-right: 40px;
          display:none;
        }
        .head {
          font-size: larger;
          font-weight: 800;
          text-align:center;
        }
        .type {
          font-size: large;
        }
        .timeAndNo {
          font-size: large;
          text-align:center;
        }
        .form {
          display: flex;
          justify-content: space-evenly;
          margin: 20px;
          padding: 10px 0;
          // background-color: aliceblue;
          border-top: 1px solid #000;
          border-bottom: 1px solid #000;
        }
        .twoDiv {
          width: calc(50% - 30px);
        }
        .el-form-item {
          margin: 0;
        }
        .barCode {
          text-align:center;
        }
        </style>`);
      
        windows.print();
        windows.close();
    },
  },

  computed: {},

  mounted() {
    console.log("cargoListcargoListcargoListcargoList", this.cargoList);
    // this.cargoCode = this.cargoCodecargoCode;
  },
};
</script>
<style lang="less" scoped>
.borderBox {
  text-align: center;
  .selectLine {
    width: 100%;
    display: flex;
    // justify-content: space-between;
    justify-content: right;
    .printBtn{
      margin-right: 40px;
    }
  }
  .head {
    font-size: larger;
    font-weight: 800;
  }
  .type {
    font-size: large;
  }
  .timeAndNo {
    font-size: large;
  }
  .form {
    display: flex;
    justify-content: space-evenly;
    margin: 20px;
    padding: 10px 0;
    // background-color: aliceblue;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    .twoDiv {
      width: calc(50% - 30px);
    }
    .el-form-item {
      margin: 0;
    }
  }
  .barCode {
  }
}
</style>
